
define(
	[
		'require',
		'echarts',
		'echarts/chart/pie',
		'zrender/tool/util'
	],
	function (require) {
		"use strict";

		var echarts = require('echarts');
		var zrUtil = require('zrender/tool/util');

		var forEach = Ember.EnumerableUtils.forEach;
		var map = Ember.EnumerableUtils.map;

		var defaultOption = {
				tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>返回码{b} : 次数{c} ({d}%)"
			    },
			    color: ['#1AB394','#47B89F','#79D2C0','#BABABA','#D3D3D3'],
			    legend: {
			        orient : 'vertical',
			        x : 'right',
			        y : 'center',
			        data:['200','404','500','400'],
			    },
			    calculable : true,
			    series : [
			        {
			            name:'浏览器',
			            type:'pie',
			            radius : '50%',
			            center: ['40%', '50%'],
			            itemStyle: {
						    normal: {
						        label: {
						            show: true,
						            position: 'outer',
						            formatter: "{d}%"
						        },
						        labelLine: {
						            show: true,
							        length: 0
						        }
						    }
						},
			            data:[
			                {value:535, name:'200'},
			                {value:210, name:'404'},
			                {value:134, name:'500'},
			                {value:35, name:'400'}
			            ]
			        }
			    ]
			};

		var CodePieView = Ember.Component.extend({
			didInsertElement: function(){
				var $dom = this.$();

				this.width = this.width||$dom.width();
				this.height = this.height||$dom.height();

				if(this.width === 0 || this.height === 0){
					Ember.assert("必须指定视图的width和height。（可通过样式或width，height属性");
					return;
				}

				this._initNormalChart();
			},

			/**
			 * 初始化概览图表
			 */
			_initNormalChart: function(){
				var $dom = this.$();

				if(G_vmlCanvasManager && G_vmlCanvasManager.init){
					G_vmlCanvasManager.initElement($dom[0]);
				}

				var overviewChart = echarts.init($dom[0]);
				//overviewChart.setOption(defaultOption);
				this.overviewChart = overviewChart;
				this.detailDataChange();
			},

			/**
			 * 数据改变后, 根据显示模式设置为相应的数据
			 */
			dataChange: Ember.observer("data", function(){
				this.detailDataChange();
			}),

			/**
			 * 详细数据改变后, 刷新概览图表
			 */
			detailDataChange: function(){
				if(!this.overviewChart){
					return;
				}

				var option = zrUtil.clone(defaultOption);

				var data = this.get("data")||[];
				var legendData = option.legend.data = [];
				var seriesData = option.series[0].data = [];

				this._translateDataToOption(data, legendData, seriesData);
				this._calculable(data, option);

				this.overviewChart.setOption(option, true);
				this.overviewChart.hideLoading();
			},

			_calculable : function (data, option) {
				forEach(data, function(performance){
					if(performance["count"] > 0) {
						option.calculable = false;
						return;
					}

				});
			},

			/**
			 * 将原始值转换为需要的series配置
			 */
			_translateSeriesDataItem: function(performance){
				var value = performance["count"];
				var name = performance["responseCode"];
				var valueItem = {
						value: value,
						name: name
					};
				return valueItem;
			},

			/**
			 * 将原始值转换为图的xAxis配置
			 */
			_translateLegendDataItem: function(performance){
				var xAxisData;
				xAxisData = performance.dimensionId;
				return xAxisData;
			},

			/**
			 * 将原始值转换为柱形图的配置
			 */
			_translateDataToOption: function(data, legendData, seriesData){
				var view = this;
				forEach(data, function(performance){
					var valueItem = view._translateSeriesDataItem(performance);
					legendData.push(performance.responseCode);
					seriesData.push(valueItem);
				});
			}
		});

		APM.ui.CodePie = CodePieView;

		return CodePieView;
	}
);